<template>
  <div class="news-list">
    <el-table :data="newsList" border style="width: 100%">
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column label="标题" min-width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)">
            {{ scope.row.title }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="回复/查看" width="120">
        <template slot-scope="scope">
          {{ scope.row.replyCount }}/{{ scope.row.viewCount }}
        </template>
      </el-table-column>
      <el-table-column label="发表时间" width="180">
        <template slot-scope="scope">
          {{ scope.row.reportTime }}
        </template>
      </el-table-column>
      <el-table-column label="最后修改" width="180">
        <template slot-scope="scope">
          {{ scope.row.lastMdfTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修复详情对话框结构 -->
    <el-dialog title="新闻详情" :visible.sync="dialogVisible" width="50%">
      <div v-if="currentNews">
        <h3>{{ currentNews.title }}</h3>
        <div class="news-info">
          <p>发表时间：{{ currentNews.reportTime }}</p>
        </div>
        <div class="news-content">
          {{ currentNews.content }}
        </div>
        <div class="reply-section">
          <h4>读者回应</h4>
          <div class="reply-list" v-if="currentNews.replies && currentNews.replies.length">
            <div v-for="(reply, index) in currentNews.replies" :key="index" class="reply-item">
              <div class="reply-time">
                {{ reply.replyTime }}
              </div>
              <div class="reply-content">{{ reply.repliesContent }}</div>
            </div>
          </div>
          <div class="reply-input">
            <el-input type="textarea" v-model="replyContent" :maxlength="200" :rows="3"
              placeholder="发表回复（字数在200字以内）"></el-input>
            <div class="reply-buttons">
              <el-button type="primary" @click="submitReply">发表回复</el-button>
              <el-button @click="dialogVisible = false">返回首页</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: [], // 新闻列表数据
      total: 0,     // 总记录数
      searchForm: {
        pageSize: 10, // 每页显示条数
        currentPage: 1 // 当前页码
      },
      dialogVisible: false,
      currentNews: null,
      replyContent: ''
    }
  },
  created() {
    // 组件创建时加载数据
    this.fetchNewsList()
  },
  methods: {
    // 获取新闻列表数据
    fetchNewsList() {
      const params = {
        pageNo: this.searchForm.currentPage,
        pageSize: this.searchForm.pageSize
      };

      console.log('发送请求到:', 'http://localhost:8085/information/list/page');

      // 修改请求配置
      this.$axios.get("http://localhost:8085/information/list/page", {
        params: params,
        withCredentials: true,  // 确保发送凭证
        headers: {
          'Content-Type': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        }
      }).then((response) => {
        console.log('获取到响应:', response);
        if (response.data) {
          // 检查响应数据结构
          console.log('响应数据结构:', JSON.stringify(response.data));
          this.newsList = response.data.list || [];
          this.total = response.data.total || 0;
        }
      }).catch(error => {
        console.error('获取新闻列表失败:', error);
        this.$message.error('获取新闻列表失败');
      });
    },

    // 修改删除新闻方法
    handleDelete(row) {
      this.$confirm('确认删除该条新闻?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`http://localhost:8085/information/list/delete/${row.id}`)
          .then(response => {
            // 修改判断逻辑，如果响应存在就认为成功
            if (response.data !== null && response.data !== undefined) {
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              // 重新加载列表数据
              this.fetchNewsList();
            } else {
              this.$message.error('删除失败');
            }
          })
          .catch(error => {
            console.error('删除失败:', error);
            this.$message.error('删除失败');
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 查看详情方法
    handleDetail(row) {
      console.log('查询详情，ID:', row.id);

      // 先更新查看次数
      this.$axios.get(`http://localhost:8085/information/list/updateContent`, {
        params: {
          id: row.id
        },
        withCredentials: true
      })
        .then(() => {
          console.log('查看次数更新成功');
          // 更新成功后刷新主页数据
          this.fetchNewsList();
        })
        .catch(error => {
          console.error('更新查看次数失败:', error);
        });

      // 获取详情数据
      this.$axios.get(`http://localhost:8085/information/list/selectByRep`, {
        params: {
          id: row.id
        },
        withCredentials: true
      })
        .then(response => {
          console.log('详情数据原始响应:', response);

          // 尝试从不同位置获取数据
          let newsData = null;

          if (response.data && Array.isArray(response.data) && response.data.length > 0) {
            // 如果返回的是数组，取第一个元素作为主信息
            console.log('返回的是数组数据');
            newsData = response.data[0];

            // 如果数组长度大于1，其余元素可能是回复
            if (response.data.length > 1) {
              // 处理回复数据，输出详细信息以便调试
              newsData.replies = response.data.slice(1).map(reply => {
                console.log('单个回复数据所有字段:', reply);
                console.log('回复时间字段值:', reply.replyTime);
                console.log('回复内容字段值:', reply.repliesContent);
                return reply;
              });
              console.log('处理后的回复列表:', newsData.replies);
            } else {
              newsData.replies = [];
            }
          } else if (response.data && typeof response.data === 'object') {
            console.log('返回的是对象数据');
            newsData = response.data;

            // 检查是否有replies字段
            if (!newsData.replies && newsData.list) {
              newsData.replies = newsData.list;
              console.log('从list字段获取回复:', newsData.replies);
            }
          }

          if (newsData) {
            console.log('处理后的新闻数据:', newsData);
            this.currentNews = newsData;
            this.dialogVisible = true;
          } else {
            console.log('没有找到有效数据');
            this.$message.error('获取详情失败: 没有数据');
          }
        })
        .catch(error => {
          console.error('获取详情失败:', error);
          this.$message.error('获取详情失败: ' + (error.message || '未知错误'));
        });
    },

    // 添加提交回复方法
    submitReply() {
      if (!this.replyContent.trim()) {
        this.$message.warning('请输入回复内容');
        return;
      }

      // 修改回复数据格式
      const replyData = {
        title: `回复：${this.currentNews.title}`,
        content: this.replyContent,
        infoId: this.currentNews.id,
        // 不要发送时间字段，让后端处理
      };

      console.log('提交的回复数据:', replyData);

      this.$axios.post(`http://localhost:8085/information/list/insert`, replyData, {
        headers: {
          'Content-Type': 'application/json'
        },
        withCredentials: true
      })
        .then(response => {
          console.log('回复响应:', response);
          if (response.data && response.data.code === 0) {
            // 回复成功后更新回复数
            this.$axios.get(`http://localhost:8085/information/list/updateReplyCount`, {
              params: {
                id: this.currentNews.id
              },
              withCredentials: true
            })
              .then(() => {
                this.$message.success('回复成功');
                this.replyContent = ''; // 清空回复内容

                // 保存当前新闻ID，用于重新获取详情
                const currentNewsId = this.currentNews.id;

                // 先关闭对话框，避免UI闪烁
                this.dialogVisible = false;

                // 重新获取列表数据
                this.fetchNewsList();

                // 延迟一点再重新获取详情并打开对话框，确保数据已更新
                setTimeout(() => {
                  // 创建一个临时对象，包含必要的ID属性
                  const tempRow = { id: currentNewsId };
                  this.handleDetail(tempRow);
                }, 500);
              })
              .catch(error => {
                console.error('更新回复数失败:', error);
              });
          } else {
            this.$message.error('回复失败');
          }
        })
        .catch(error => {
          console.error('提交回复失败:', error);
          this.$message.error('回复失败: ' + (error.message || '未知错误'));
        });
    }
  }
}
</script>
<style scoped>
.news-list {
  padding: 20px;
}

.news-info {
  color: #666;
  margin: 15px 0;
}

.news-content {
  margin-top: 20px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.reply-section {
  margin-top: 30px;
  border-top: 1px solid #eee;
  padding-top: 20px;
}

.reply-item {
  padding: 10px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 10px;
}

.reply-time {
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

.reply-content {
  line-height: 1.5;
}

.reply-input {
  margin-top: 20px;
}

.reply-buttons {
  margin-top: 10px;
  text-align: right;
}
</style>
